<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>菜单</title>

	<!-- jQuery(Bootstrap的JavaScript插件需要引入jQuery，务必在bootstrap.min.js之前引入) -->
	<script src="/static/js/jquery-3.5.1.min.js"></script>
	
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" data-integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" data-crossorigin="anonymous">
	
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" data-integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" data-crossorigin="anonymous"></script>
	
	<link rel="shortcut icon" href="/static/images/favicon.ico">
	<link rel="Bookmark" href="/static/images/favicon.ico">
</head>

<script type="text/javascript">
	
	$(function(){
		$("#fontID").change(function() {//监听select的改变
			loadFont();
		});
	});

	var loadFont = function() {
		var font_val = $("#fontID").val(); 
		$("body").css("font-family", font_val);
	};

	var changeFont = function(type) {
		var font_selected = $("#fontID option:selected"); 
		var font_val = font_selected.val();
		if (type == "prev" && font_val != "") {
			font_val = font_selected[0].previousElementSibling.value;
		}
		if (type == "next" && font_val != "FZYaoti") {
			font_val = font_selected[0].nextElementSibling.value;
		}
		$("#fontID").find('option[value="'+font_val+'"]').prop("selected", true);
		loadFont();
	};

</script>

<body>
<div class="container">

	<select id="fontID" style="margin-top: 20px;">
		<option value="">默认字体</option>

		<option value="SimSun">宋体</option>
		<option value="NSimSun">新宋体</option>
		<option value="FangSong">仿宋</option>
		<option value="KaiTi">楷体</option>
		<option value="DFKai-SB" onemptied="onemptied">标楷体</option>
		<option value="SimHei">黑体</option>
		<option value="LiSu">隶书</option>
		<option value="YouYuan">幼圆</option>
		<option value="等线">等线</option>
		<option value="平方">平方</option>
		
		<option value="Fugaz One">Fugaz One</option>
		<option value="Microsoft YaHei">微软雅黑</option> 
		<option value="Microsoft JhengHei">微软正黑体</option>
		
		<option value="PMingLiU">新细明体</option>
		<option value="MingLiU">细明体</option>
		
		<option value="STHeiti Light [STXihei]">华文细黑</option>
		<option value="STHeiti">华文黑体</option>
		<option value="STKaiti">华文楷体</option>
		<option value="STFangsong">华文仿宋</option>
		<option value="STXihei">华文细黑</option>
		<option value="STSong">华文宋体</option>
		<option value="STZhongsong">华文中宋</option>
		<option value="STXingkai">华文行楷</option>
		<option value="STXinwei">华文新魏</option>
		<option value="STCaiyun">华文彩云</option>
		<option value="STHupo">华文琥珀</option>
		<option value="STLiti">华文隶书</option>

		<option value="方正大草简体">方正大草简体</option>
		<option value="FZShuTi">方正舒体</option>
		<option value="FZYaoti">方正姚体</option>
	</select>
	<button id="prev_font" type="button" class="btn btn-xs btn-primary" onclick="changeFont('prev')">上一个字体</button>
	<button id="next_font" type="button" class="btn btn-xs btn-primary" onclick="changeFont('next')">下一个字体</button>
	

	<h4>CSS文件夹：</h4>
	<ol>
		<li>animate.css：css3 动画库</li>
	</ol>

	<h4>JS文件夹：</h4>
	<ol>
		<li>jquery-3.5.1.min.js</li>
		<li>jquery.min.js</li>
		<li>jquery.stellar.min.js：视差插件</li>
		<li>jquery.waypoints.min.js：滚动监听插件</li>
		<li>modernizr-2.6.2.min.js：是一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性</li>
	</ol>

	<h4>file文件夹：</h4>
	<ol>
		<li>font-awesome-4.7.0.zip：一套绝佳的图标字体库和CSS框架</li>
	</ol>
</div>
</body>
</html>